.record-audio {
    position: absolute;
    width: 500px;
    height: 370px;
    background-color: #fff;
    z-index: 8000;
    border-radius: 3px;
    border: 2px solid #999;

    .top {
        margin: 30px;
        height: 50px;
        color: #000;

        .audio-tips {
            color: #666;
        }
    }

    .center {
        margin: 20px 0;
        background-color: #fff;
        text-align: center;
        height: 190px;

        .playback-block {
            text-align: left;
            //background-color: red;
            width: 140px;
            margin: auto;
            padding: 0 10px;
        }

        .playback {
            width: 70px;
            line-height: 30px;
            display: inline-block;
            color: #0052cc;
            cursor: pointer;
            margin: 10px 0;
            text-decoration: underline;
        }

        .audio-msg {
            padding: 10px 0;
            width: 140px;
            line-height: 20px;
            border-radius: 3px;
            display: inline-block;
            background-color: #0052cc;
            color: #fff;
            cursor: pointer;
        }

        .saveFin {
            position: relative;
            bottom: -16px;
            right: -258px;
            height: 50px;
            width: 240px;
            //border: 1px solid red;
            z-index: 1;
        }

        .flashhide {
            z-index: -10;
        }

        .initcls {
            position: relative;
            //z-index: -1;
            top: -150px;
            height: 93px;
            width: 240px;
            margin: auto;
            //border: 1px solid red;
        }

        .audio-icon {
            cursor: pointer;
            background: url("imgs/start.png") no-repeat;
            width: 90px;
            height: 90px;
            margin: auto;
        }

        .start {
            background: url("imgs/start.png") no-repeat;
            width: 90px;
            height: 90px;
        }

        .audioing {
            background: url("imgs/audio.gif") no-repeat;
            width: 90px;
            height: 90px;
        }

        .stop {
            background: url("imgs/stop.png") no-repeat;
            width: 90px;
            height: 90px;
        }
    }

    .bottom {
        //padding: 20px 0;
        //background-color: green;
        height: 50px;
        text-align: center;

        .btncancel {
            width: 240px;
            cursor: pointer;
            line-height: 50px;
            display: inline-block;
        }

        .play-btn {
            width: 240px;
            line-height: 50px;
            display: inline-block;
            background-color: #0052cc;
            float: right;
            color: #fff;
            cursor: pointer;
        }

        .btnUpload {
            width: 240px;
            line-height: 50px;
            display: inline-block;
            float: right;
        }

        .uploadcur {
            color: #fff;
            background-color: #0052cc;
        }
    }

    .preloader_1 {
        display: inline-block;
        position: relative;
    }

    .preloader_1 .pk_end {
        display: block;
        bottom: 0;
        width: 9px;
        height: 5px;
        background: #9b59b6;
        position: absolute;
    }

    .preloader_1 .pk_play {
        display: block;
        bottom: 0;
        width: 9px;
        height: 5px;
        background: #9b59b6;
        position: absolute;
        -webkit-animation: playback_1 2s infinite ease-in-out;
        -moz-animation: playback_1 2s infinite ease-in-out;
        -ms-animation: playback_1 2s infinite ease-in-out;
        animation: playback_1 2s infinite ease-in-out;
    }

    .preloader_1 span:nth-child(2) {
        left: 11px;
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        -ms-animation-delay: 0.2s;
        -o-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .preloader_1 span:nth-child(3) {
        left: 22px;
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        -ms-animation-delay: 0.4s;
        -o-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    .preloader_1 span:nth-child(4) {
        left: 33px;
        -webkit-animation-delay: 0.6s;
        -moz-animation-delay: 0.6s;
        -ms-animation-delay: 0.6s;
        -o-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .preloader_1 span:nth-child(5) {
        left: 44px;
        -webkit-animation-delay: 0.8s;
        -moz-animation-delay: 0.8s;
        -ms-animation-delay: 0.8s;
        -o-animation-delay: 0.8s;
        animation-delay: 0.8s;
    }
    @-webkit-keyframes playback_1 {
        0% {
            height: 5px;
            -webkit-transform: translateY(0px);
            background: #9b59b6;
        }

        25% {
            height: 30px;
            -webkit-transform: translateY(15px);
            background: #3498db;
        }

        50% {
            height: 5px;
            -webkit-transform: translateY(0px);
            background: #9b59b6;
        }

        100% {
            height: 5px;
            -webkit-transform: translateY(0px);
            background: #9b59b6;
        }
    }
    @-moz-keyframes preloader_1 {
        0% {
            height: 5px;
            -moz-transform: translateY(0px);
            background: #9b59b6;
        }

        25% {
            height: 30px;
            -moz-transform: translateY(15px);
            background: #3498db;
        }

        50% {
            height: 5px;
            -moz-transform: translateY(0px);
            background: #9b59b6;
        }

        100% {
            height: 5px;
            -moz-transform: translateY(0px);
            background: #9b59b6;
        }
    }
    @-ms-keyframes preloader_1 {
        0% {
            height: 5px;
            -ms-transform: translateY(0px);
            background: #9b59b6;
        }

        25% {
            height: 30px;
            -ms-transform: translateY(15px);
            background: #3498db;
        }

        50% {
            height: 5px;
            -ms-transform: translateY(0px);
            background: #9b59b6;
        }

        100% {
            height: 5px;
            -ms-transform: translateY(0px);
            background: #9b59b6;
        }
    }
    @keyframes preloader_1 {
        0% {
            height: 5px;
            transform: translateY(0px);
            background: #9b59b6;
        }

        25% {
            height: 30px;
            transform: translateY(15px);
            background: #3498db;
        }

        50% {
            height: 5px;
            transform: translateY(0px);
            background: #9b59b6;
        }

        100% {
            height: 5px;
            transform: translateY(0px);
            background: #9b59b6;
        }
    }
}
